<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>PACP Database Viewer</title>
        <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="lib/dlz/css/MultiSelect.css" />
        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js">
        </script>
        <!-- ENDLIBS -->
        <script type="text/javascript" src="lib/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="lib/ext/ux/TabCloseMenu.js">
        </script>
        <script type="text/javascript" src="lib/ext/ux/SearchField.js">
        </script>
        <!--<script type="text/javascript" src="lib/pacp/pacp.js">
        </script>-->
        <script type="text/javascript" src="lib/jwplayer/swfobject.js">
        </script>
        <!--
        <script src="http://openlayers.org/api/2.8/OpenLayers.js">
        </script>
        <script type="text/javascript" src="lib/GeoExt/script/GeoExt.js">
        </script>
        -->
        <script type="text/javascript" src="lib/dlz/form/MultiSelect.js">
        </script>
        <script type="text/javascript" src="lib/dlz/form/ItemSelector.js">
        </script>
        <script type="text/javascript" src="lib/pacp/pacp.multipleselect.js">
        </script>
		<script type="text/javascript" src="lib/pacp/pacp.listeditor.js">
        </script>
        <script type="text/javascript" src="lib/pacp/pacp.selectwindow.js">
        </script>
        <link rel="stylesheet" type="text/css" href="combos.css" />
        <!-- A Localization Script File comes here -->
        <script type="text/javascript">
            
            Ext.onReady(function(){
             var columns = [{
                    header: 'text',
                    width: .5,
                    dataIndex: 'text'
                }, {
                    header: 'value',
                    dataIndex: 'value',
                    hidden: true
                }];
                var single_select = new pacp.selectwindow({
                    store: new Ext.data.JsonStore({
                        url: 'atlas_list.js',
                        root: 'data',
                        fields: ['text', 'value']
                    }),
                    columns: columns,
                    singleSelect: true,
                    title: 'Single Select Window',
                    width: 200,
                    selectorLable: 'Numbers',
                    hideHeaders: true
                });
                
                //                single_select.show();
                var m_select = new pacp.selectwindow({
                    store: new Ext.data.JsonStore({
                        url: 'atlas_list.js',
                        root: 'data',
                        fields: ['text', 'value']
                    }),
                    columns: [{
                        header: 'text',
                        width: .5,
                        dataIndex: 'text'
                    }],
                    singleSelect: false,
                    title: 'Multiple Select Window - Hold Control Key to select Multiple',
                    selectorLable: 'Atlas'
                });
                m_select.on('submitselection', function(data){
					ds.loadData(data)
				})
                //                m_select.show();
                var condition_select = new pacp.selectwindow({
                    width: 250,
                    store: new Ext.data.JsonStore({
                        url: 'conditioncode.js',
                        root: 'data',
                        fields: ['value', 'description']
                    }),
                    columns: [{
                        header: 'Code',
                        width: .2,
                        dataIndex: 'value'
                    }, {
                        header: 'Description',
                        width: .8,
                        dataIndex: 'description'
                    }],
                    singleSelect: true,
                    title: 'Multiple Select Window - Hold Control Key to select Multiple',
                    selectorLable: 'Atlas'
                });
				
				condition_select.on('submitselection', function(data){
					ds.loadData(data)
				})
                
                //                condition_select.show();
                
                ds = new Ext.data.ArrayStore({
                    data: [['0150'], ['0151'], ['152']],
                    fields: ['value'],
                    sortInfo: {
                        field: 'value',
                        direction: 'ASC'
                    }
                });
                
                var listView = new Ext.list.ListView({
                    store: ds,
                    multiSelect: false,
                    simpleSelect: false,
                    singleSelect: true,
                    fieldLabel: 'Maps',
                    frame: true,
                    width: 200,
                    name: 'itemselector',
                    hideHeaders: true,
                    emptyText: 'No item to display',
                    reserveScrollOffset: true,
                    columns: [{
                        'header': 'value',
                        dataIndex: 'value'
                    }]
                });
                var top = new Ext.Panel({
                    width: 600,
                    labelAlign: 'left',
                    layout: 'table',
                    layoutConfig: {
                        columns: 3
                    },
                    defaults: {
                        frame: false,
                        width: 200,
                        height: 200
                    },
                    items: [{
                        html: 'Atlas Maps:',
                        width: 100
                    }, {
                        items: listView,
                        width: 400
                    }, {
                        xtype: 'button',
                        text: 'Edit',
                        width: 100,
                        handler: function(){
                            m_select.show()
                        }
                    },{
                        html: 'Pipe Property:',
                        width: 100
                    }, {
                        items: listView,
                        width: 400
                    }, {
                        xtype: 'button',
                        text: 'Edit',
                        width: 100,
                        handler: function(){
                            m_select.show()
                        }
                    },
					{title: 'Pipe Defects',
					collapsable: true,
					height: 0,
					colspan: 3,width: 600},
					{colspan: 3, width:600, height: 400, title: 'new list control', items: new pacp.listeditor()
						
					},
					{
                        html: 'Pipe Defects:',
                        width: 100
                    }, {
                        items: listView,
                        width: 400
                    }, {
                        xtype: 'button',
                        text: 'Edit',
                        width: 100,
                        handler: function(){
                            m_select.show()
                        }
                    }]
                });
                
                //                    frame: true,
                //                    title: 'Multi Column, Nested Layouts and Anchoring',
                //                    bodyStyle: 'padding:5px 5px 0',
                //                    width: 600,
                //                    items: [{
                //                        layout: 'column',
                //                        items: [{
                //                            columnWidth: .5,
                //                            layout: 'form',
                //                            items: [listView, {
                //                                xtype: 'textfield',
                //                                fieldLabel: 'First Name',
                //                                name: 'first',
                //                                anchor: '95%'
                //                            }, {
                //                                xtype: 'textfield',
                //                                fieldLabel: 'Company',
                //                                name: 'company',
                //                                anchor: '95%'
                //                            }]
                //                        }, {
                //                            columnWidth: .2,
                //                            layout: 'form',
                //                            items: [{
                //                                xtype: 'textfield',
                //                                fieldLabel: 'Last Name',
                //                                name: 'last',
                //                                anchor: '95%'
                //                            }, {
                //                                xtype: 'textfield',
                //                                fieldLabel: 'Email',
                //                                name: 'email',
                //                                vtype: 'email',
                //                                anchor: '95%'
                //                            }]
                //                        }, {
                //                            columnWidth: .3,
                //                            layout: 'form',
                //                            items: [{
                //                                xtype: 'button',
                //                                text: 'Edit',
                //                                handler: function(){
                //                                    condition_select.show()
                //                                }
                //                            }, {
                //                                xtype: 'button',
                //                                text: 'Edit',
                //                                handler: function(){
                //                                    single_select.show()
                //                                }
                //                            }]
                //                        }]
                //                    }, {
                //                        xtype: 'htmleditor',
                //                        id: 'bio',
                //                        fieldLabel: 'Biography',
                //                        height: 200,
                //                        anchor: '98%'
                //                    }],
                //                    
                //                    buttons: [{
                //                        text: 'Save'
                //                    }, {
                //                        text: 'Cancel'
                //                    }]
                //                });
                
                top.render(document.body);
                
                
               
                
                
                
                
                
            })
            //            //            Ext.onReady(pacp.app.init, pacp.app);
            //            /*!
            //             * Ext JS Library 3.3.1
            //             * Copyright(c) 2006-2010 Sencha Inc.
            //             * licensing@sencha.com
            //             * http://www.sencha.com/license
            //             */
            //            Ext.onReady(function(){
            //            
            //                Ext.QuickTips.init();
            //                Ext.form.Field.prototype.msgTarget = 'side';
            //                
            //                /*
            //                 * Ext.ux.form.MultiSelect Example Code
            //                 */
            //                var msForm = new Ext.form.FormPanel({
            //                    title: 'MultiSelect Test',
            //                    width: 700,
            //                    bodyStyle: 'padding:10px;',
            //                    renderTo: 'multiselect',
            //                    items: [{
            //                        xtype: 'multiselect',
            //                        fieldLabel: 'Multiselect<br />(Required)',
            //                        name: 'multiselect',
            //                        width: 250,
            //                        height: 200,
            //                        allowBlank: false,
            //                        store: [[123, 'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
            //                        tbar: [{
            //                            text: 'clear',
            //                            handler: function(){
            //                                msForm.getForm().findField('multiselect').reset();
            //                            }
            //                        }],
            //                        ddReorder: true
            //                    }],
            //                    tbar: [{
            //                        text: 'Options',
            //                        menu: [{
            //                            text: 'Set Value (2,3)',
            //                            handler: function(){
            //                                msForm.getForm().findField('multiselect').setValue('2,3');
            //                            }
            //                        }, {
            //                            text: 'Toggle Enabled',
            //                            handler: function(){
            //                                var m = msForm.getForm().findField('multiselect');
            //                                if (!m.disabled) {
            //                                    m.disable();
            //                                }
            //                                else {
            //                                    m.enable();
            //                                }
            //                            }
            //                        }]
            //                    }],
            //                    
            //                    buttons: [{
            //                        text: 'Save',
            //                        handler: function(){
            //                            if (msForm.getForm().isValid()) {
            //                                Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />' +
            //                                msForm.getForm().getValues(true));
            //                            }
            //                        }
            //                    }]
            //                });
            //                
            //                
            //                var ds = new Ext.data.ArrayStore({
            //                    data: [[123, 'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine'],['10', 'Nine'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven'],['11', 'Eleven']],
            //                    fields: ['value', 'text'],
            //                    sortInfo: {
            //                        field: 'value',
            //                        direction: 'ASC'
            //                    }
            //                });
            //                
            //                /*
            //                 * Ext.ux.form.ItemSelector Example Code
            //                 */
            //                var isForm = new Ext.form.FormPanel({
            //                    title: 'ItemSelector Test',
            //                    width: 700,
            //                    bodyStyle: 'padding:10px;',
            //                    renderTo: 'itemselector',
            //                    items: [{
            //                        xtype: 'itemselector',
            //                        name: 'itemselector',
            //                        fieldLabel: 'ItemSelector',
            //                        imagePath: 'lib/dlz/images',
            //                        multiselects: [{
            //                            width: 250,
            //                            height: 200,
            //                            store: ds,
            //                            displayField: 'text',
            //                            valueField: 'value'
            //                        }, {
            //                            width: 250,
            //                            height: 200,
            //                            store: [['10', 'Ten']],
            //                            tbar: [{
            //                                text: 'clear',
            //                                handler: function(){
            //                                    isForm.getForm().findField('itemselector').reset();
            //                                }
            //                            }]
            //                        }]
            //                    }],
            //                    
            //                    buttons: [{
            //                        text: 'Save',
            //                        handler: function(){
            //                            if (isForm.getForm().isValid()) {
            //                                Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />' +
            //                                isForm.getForm().getValues(true));
            //                            }
            //                        }
            //                    }]
            //                });
            //                
            //            });
        </script>
        <style type="text/css">
            #search-results a {
                color: #385F95;
                font: bold 11px tahoma, arial, helvetica, sans-serif;
                text-decoration: none;
            }
            
            #search-results a:hover {
                text-decoration: underline;
            }
            
            #search-results .search-item {
                padding: 5px;
            }
            
            #search-results p {
                margin: 3px !important;
            }
            
            #search-results {
                border-bottom: 1px solid #ddd;
                margin: 0 1px;
                height: 300px;
                overflow: auto;
            }
            
            #search-results .x-toolbar {
                border: 0 none;
            }
            
            .Upstream {
                background-image: url(lib/pacp/images/arrow-up-red.gif);
                background-repeat: no-repeat;
                text-indent: 16px;
                color: red;
                display: block;
            }
            
            .Downstream {
                color: blue;
                background-image: url(lib/pacp/images/arrow-down.gif);
                background-repeat: no-repeat;
                text-indent: 16px;
                width: 16px;
                height: 16px;
                display: block;
            }
            
            #header .api-title {
                color: white;
                font-family: tahoma, arial, sans-serif;
                font-size: 16px;
                font-size-adjust: none;
                font-stretch: normal;
                font-style: normal;
                font-variant: normal;
                font-weight: normal;
                line-height: normal;
                margin: 5px;
            }
            
            #header {
                background: #1E4176 url(hd-bg.gif) repeat-x scroll 0 0;
                border: 0 none;
                padding-left: 3px;
                padding-top: 3px;
            }
            
            .run-summary p {
                font-weight: 900;
                /*                font-size: 80%;
                 */
            }
            
            .run-summary .right {
                float: right;
                /*
                 font-size: 70%;
                 */
            }
            }
            
            .run-summary .comment {
                font-size: 80%;
                font-style: italic;
                color: #5C5858;
            }
            
            button.icon-map {
                background-image: url(lib/pacp/images/map.gif);
            }
            
            button.icon-help {
                background-image: url(lib/pacp/images/icon-question.gif);
            }
            
            span.OK {
                font-size: large;
                color: green;
            }
            
            span.error {
                font-size: large;
                color: red;
            }
        </style>
        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    </head>
    <body>
        <div id="header">
            <div class="api-title">
                PACP Database Viewer
            </div>
        </div>
        <div id="multiselect">
        </div>
        <div id="itemselector" class="demo-ct">
        </div>
        <!-- Fields required for history management -->
        <form id="history-form" class="x-hidden">
            <input type="hidden" id="x-history-field" />
            <iframe id="x-history-frame">
            </iframe>
        </form>
    </body>
</html>
